<template>
  <div class="container">
    <div
      v-for="(menu, index) in menus"
      :key="index"
      class="menu"
      :class="{ 'menu-selected': menu.selected }"
      @click.stop="onMainMenuClick(menu, menus)"
    >
      <div style="user-select: none">
        {{ menu.name }}
      </div>

      <div v-show="menu.selected" class="sub">
        <div
          v-for="(sub, index) in menu.sub"
          :key="index"
          @mouseenter="sub.selected = true"
          @mouseleave="sub.selected = false"
          :class="{ 'menu-selected': sub.selected }"
          @click.stop="onSubMainClick(sub, menu)"
        >
          <div style="user-select: none;">
            {{ sub.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { DialogOptions, Msg } from '@/ui-kit/dialog';

class Menu {
  name: string;
  click: Function | null;
  sub: Array<Menu> = [];
  selected = false;

  constructor(name: string, click: Function | null = null) {
    this.name = name;
    this.click = click;
  }

  addSub(name: string, callback: Function | null = null) {
    const menu = new Menu(name, callback);
    this.sub.push(menu);
    return this;
  }
}

import { defineComponent, onMounted, ref } from 'vue';
import { Emitter } from '@/ui-kit/index';

export default defineComponent({
  name: 'editor-menu',
  setup() {
    const menus = ref<Menu[]>([]);

    function resetMenu() {
      menus.value.forEach(menu => {
        menu.selected = false;
      });
    }

    function onTestDialog() {
      const options: DialogOptions = {
        comp: null,
        width: 400,
        height: 500,
        closeCB: () => {
          console.log('close');
        },
      };
      Emitter.emit(Msg.ShowDialog, options);
    }

    onMounted(() => {
      let file = new Menu('文件', () => {
      });
      file.addSub('加载Bundle', () => {

      }).addSub('新建', () => {
        console.log('新建');
      })
        .addSub('退出', () => {

        })
        .addSub('test', () => {
        })
        .addSub('dialog', () => {
          onTestDialog();
        });
      menus.value.push(file);

      let insert = new Menu('插入');
      insert.addSub('图片', () => []);
      menus.value.push(insert);

      document.addEventListener('click', () => {
        resetMenu();
      });
    });
    return {
      menus,
      onSubMainClick(menu: Menu) {
        menu.click && menu.click();
        resetMenu();
      },
      onMainMenuClick(menu: Menu, menus: Array<Menu>) {
        menu.selected = !menu.selected;
        if (menu.selected) {
          if (menus) {
            menus.forEach((item: Menu) => {
              if (item !== menu) {
                item.selected = false;
              }
            });
          }
        }
      },
    };
  },
});

</script>
<style scoped lang="scss">

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: #b4d0ee;
  height: 20px;

  .menu {
    margin: 0 1px;
    max-width: 100px;
    min-width: 100px;

    .sub {
      display: flex;
      flex-direction: column;
      padding: 3px 0;
      background-color: #d5d9de;
      position: relative;
      top: 0;
    }
  }

  .menu-selected {
    background-color: #1379e7;
  }
}

</style>
